<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.list-item {
				display: inline-block;
				margin-right: 10px;
			}
			
			.list-enter-active,
			.list-leave-active {
				transition: all 1s;
			}
			
			.list-enter,
			.list-leave-active {
				opacity: 0;
				transform: translateY(30px);
			}
		</style>
	</head>

	<body>
		<div id="list-demo" class="demo">
			<button v-on:click="add">Add</button>
			<button v-on:click="remove">Remove</button>
			<transition-group name="list" tag="p">
				<span v-for="item in items" v-bind:key="item" class="list-item">
			      {{ item }}
			    </span>
			</transition-group>
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#list-demo',
				data: {
					items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
					nextNum: 10
				},
				methods: {
					randomIndex: function() {
						return Math.floor(Math.random() * this.items.length)
					},
					add: function() {
						this.items.splice(this.randomIndex(), 0, this.nextNum++)
					},
					remove: function() {
						this.items.splice(this.randomIndex(), 1)
					},
				}
			})
		</script>
	</body>

</html>